<!DOCTYPE html>
<head>
  <title>Subsequent navigations to lazily loaded iframes do not crash the renderer</title>
  <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
  <link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
</head>

<body>
  <!-- This is used to represent the top of the viewport, so we can scroll the
       below-viewport iframe out-of-view later in the test -->
  <div id="top_div"></div>
  <div style="height:1000vh;"></div>
  <iframe id="below_viewport" loading="lazy"
          src="http://{{domains[www]}}:{{ports[https][0]}}/html/semantics/embedded-content/the-iframe-element/resources/subframe.html">
  </iframe>

<script>
  const t = async_test();
  const iframe = document.querySelector('#below_viewport');
  const top_div = document.querySelector('#top_div');

  let has_window_load_fired = false;

  // This should be triggered first.
  window.addEventListener('load', t.step_func(() => {
    has_window_load_fired = true;
    // Scroll the loading=lazy below-viewport iframe into view, so that it loads.
    iframe.scrollIntoView();
  }));

  iframe.onload = t.step_func_done(async () => {
    assert_true(has_window_load_fired,
                "The loading=lazy below-viewport iframe should not block the " +
                "window load event");
    await changeIframeSourceAndScrollToTop();
  });

  async function changeIframeSourceAndScrollToTop() {
    // Lazily load a different iframe.
    iframe.src =
      'http://{{domains[www2]}}:{{ports[https][0]}}/html/semantics/embedded-content/the-iframe-element/resources/subframe.html'
    await new Promise(resolve => {
      iframe.onload = resolve;
    });

    top_div.scrollIntoView();

    await new Promise(resolve => {
      setTimeout(resolve, 500);
    });

    iframe.scrollIntoView();
  }
</script>
</body>
